<template>
  <div class="zl-text-basic-attribute">
    <div class="zl-text-text">
      文本
      <!-- <Input class="zl-text-input" :rows="4" type="textarea" v-model="text.textValue"/> -->
      <Input class="zl-text-input" v-model="text.textValue"/>
    </div>
    <div class="zl-text-position">
        <span class="r-tit">文字位置</span>
        <div class="r-cnt">
          <RadioGroup v-model="text.textAlign">
              <Radio label="left"><span>居左</span></Radio>
              <Radio label="center"><span>居中</span></Radio>
              <Radio label="right"><span>居右</span></Radio>
          </RadioGroup>
        </div>
    </div>
    <!-- <div class="zl-text-position">
        <span class="r-tit">字体类型</span>
        <div class="r-cnt">
          <Select v-model="text.fontType" style="width:200px">
              <Option v-for="(item, index) in fontTypeList" :value="item.value" :key="index">{{ item.label }}</Option>
          </Select>
        </div>
    </div> -->
    <div class="zl-text-position">
        <span class="r-tit">字体大小</span>
        <div class="r-cnt">
          <Select v-model="text.fontSize" style="width:80px">
              <Option v-for="(item, index) in fontSizeList" :value="item" :key="index">{{ item }}</Option>
              <!-- <Option  v-for="its in 24" v-if="its>=12" :key="its" :label="its+'px'" :value="its"></Option> -->
          </Select>
          <!-- <div class="zl-text-other">
            <a class="m-r-15">B</a>
            <a class="m-r-15">I</a>
            <a class="m-r-15">U</a>
          </div> -->
        </div>
    </div>
    <div class="zl-text-position">
        <span class="r-tit">字体颜色</span>
        <div class="r-cnt">
          <ColorPicker v-model="text.fontColor"/>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      text: {
        fontSize: '',
        fontType: '',
        textValue: '',
        textAlign: '',
        fontColor: ''
      },
      textAlignList:[
        { value: 'top', label: '居上'},
        { value: 'center', label: '居中'},
        { value: 'bottom', label: '居下'},
        { value: 'left', label: '居左'},
        { value: 'right', label: '居右'},
      ],
      fontTypeList: [
        { value: 'song', label: '宋体'},
        { value: 'carcass', label: '楷体'},
        { value: 'blackBody', label: '黑体'},
      ],
      fontSizeList: ['12', '14', '16', '18', '20', '24', '28', '32', '36', '40', '44', '48', '52', '56', '60'],
    }
  },
  props:{
    graphOptions: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  watch:{
    text: {
      handler(newVal) {
        console.log(newVal)
        let textConfiguration = newVal
        this.$emit('changeText', textConfiguration)
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.zl-text-basic-attribute{
  .zl-text-text{
    height: 32px;
    line-height: 32px;
    .zl-text-input{
      width: 200px;
      float: right;
    }
  }

  .zl-text-position{
    margin-top: 10px;
    .r-tit{
        width: 62px;
        display: inline-block;
        height: 32px;
        line-height: 32px;
    }
    .r-cnt{
        // margin-right: 9px;
        float: right;
        width:  calc(~ '100% - 72px');
        .zl-text-other{
          float: right;
          height: 32px;
          line-height: 32px;
        }
    }
  }
}
</style>

